<template>
  <div>
  <!-- header部分 -->
  <nav-title title="待办事项" routerLink="index"/>

  <div class="search">
    <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="searchText1">
    <img class="search-img" src="./images/search.png" alt="" @click="getTodoListInfo">
  </div>
  <ul>
    <li v-for="(todoItem,index) in todoList">
      <div class="neirong"  @click="goToApprove(todoItem.cWfStatus,todoItem.cWfType,todoItem.cTransactionNbr,todoItem.cValLogic)">
        <div class="yuan0" v-if=" index%4 == 0 "></div>
        <div class="yuan1" v-if=" index%4 == 1 "></div>
        <div class="yuan2" v-if=" index%4 == 2 "></div>
        <div class="yuan3" v-if=" index%4 == 3 "></div>

        <div class="con content-todo">{{todoItem.text254}}</div>
        <div class="clearfix timer">
          <div class="con fl time" style="height: 25px;">{{todoItem.createdttm|dateFormat2}}</div>
          <div class="operation fr">
            <img src="./images/arrow-right.png" alt="">
          </div>
        </div>

      </div>
    </li>
  </ul>

  </div>
</template>

<script>

  import vHeader from '../../components/header'
  import {getTodoList} from '../../api/api'
  import { json2Form } from '../../util/http'

  export default {

    components: {
      vHeader
    },
    mounted(){
      //代办事项列表，默认先查询待审批
      this.getTodoListInfo();
    },
    data() {
      return {
        searchText1: '',//搜索待审批
        todoList: [], //待审批
      }

    },
    methods: {
      getTodoListInfo(){
        let params = {
          queryKey: this.searchText1
        };
        getTodoList(params).then(res=>{

          if(res && res.retCode === '000000'){
          this.todoList = res.retData;

        }else{
          this.$vux.alert.show({
            title: '',
            content: res.retMsg
          })
        }
      }).catch (res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      },
      goToApprove(cWfStatus,cwfType,cTransactionNbr,cValLogic){
        ////B-已驳回,如果是移动端有发起功能的流程
        //cValLogic:此字段判断是否为申请人
        if(cWfStatus == 'B' && cwfType != 'test' && cValLogic == '99') {
          this.$vux.alert.show({
            title: '警告',
            content: '当前流程已被驳回，请至PC端待办事项中重新提交流程'
          })
        }else{
          //非上述情况，点击进入相应审批流程;
          // DMC:离职补偿金、HIR:招聘录用审批、LOF:解除劳动合同审批
          // PRC:转正审批、TER:离职审批、TOL:工作移交审批、DRFT：招聘录用审批
          // XFR:人员调动审批、CER：证明开具审批、MOD：个人信息修改审批
          if(cwfType == 'DMC'){
            this.$router.push({
              name: 'Compensate',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'HIR'){
            this.$router.push({
              name: 'Employment',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'LOF'){
            this.$router.push({
              name: 'Dissolution',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'PRC'){
            this.$router.push({
              name: 'Formal',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          } else if(cwfType == 'TER'){
            this.$router.push({
              name: 'Wastage',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'TOL'){
            this.$router.push({
              name: 'Handover',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'XFR'){
            this.$router.push({
              name: 'Mobilization',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'MOD'){
            this.$router.push({
              name: 'InfoModify',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'CER'){
            this.$router.push({
              name: 'proveModify',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }else if(cwfType == 'DRFT'){
            this.$router.push({
              name: 'Employment',
              query: {
                cTransactionNbr: cTransactionNbr,
                approved: '0'
              }
            })
          }
        }

      }
    }

  }

</script>

<style type="text/scss" lang="scss" scoped>
  .search {
    position: relative;
  .search-input{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 90%;
    margin: 8px 0;
    padding-left: 5px;
    text-align: left;
    border-radius: 3px;
    border: 2px solid #f5f5f5 !important;
  }
  .search-img {
    position: absolute;
    top: 11px;
    right: 5%;
    margin-right: 10px;
  }
  }

  ul li:first-child{
    margin-top: -26px;
  }
  ul li:last-child{
    margin-bottom: 22px;
  }
  ul {
    margin-top: 20px;
    margin-left: 10px;
    clear: both;
    height: auto;
    overflow: hidden;
    background: url(../userInfo/image/rongyu_bg.jpg) 15px 50px repeat-y;
  .timer {
    margin-top: 22px;
    .time {
      font-size: 13px;
      color: #9b9b9b;
    }
  }
  li {
    clear: both;
    height: 100%;
    padding-top: 22px;
    cursor: default;
  .neirong {
    position: relative;
  .operation{
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: 9px;
  }
  }

  }
  .con {
    text-align: left;
    margin-left: 24px;
    line-height: 25px;
  }
  .content-todo {
    width: 80%;
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .yuan0 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #07BC4B;
  }
  .yuan1 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16A8E7;
  }
  .yuan2 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF6633;
  }
  .yuan3 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFFF00;
  }
  }

</style>
